<template>
    <div class="layout-container h-screen w-screen flex overflow-hidden">
        <div class="layout-aside transition-width duration-300 shrink-0" :style="{width:asideWidth}">
            <global-logo></global-logo>
            <comp-nav-menu :menuData="menuList"></comp-nav-menu>
        </div>
        <div class="flex-1 h-screen flex flex-col">
            <div class="layout-header pl-5 pr-5 flex items-center justify-between bg-[var(--df-header-bg-color)] h-[56px]">
                <div class="left-action flex items-center">
                    <atom-menu-toggle></atom-menu-toggle>
                </div>
                <div class="right-action flex items-center">
                    <el-space :size="5">
                        <atom-refresh></atom-refresh>
                        <atom-fullscreen></atom-fullscreen>
                        <atom-theme></atom-theme>
                        <atom-skin></atom-skin>
                        <atom-user></atom-user>
                    </el-space>
                </div>
            </div>
            <div class="layout-main p-3 overflow-hidden box-border flex-1">
                <router-view></router-view>
            </div>
        </div>

    </div>
</template>


<script setup>

import {ref, computed} from 'vue'
import CompNavMenu from "./components/compNavMenu.vue";
import GlobalLogo from "./modules/global-logo/index.vue"
import AtomFullscreen from "./components/atom-fullscreen.vue";
import AtomTheme from "./components/atom-theme.vue";
import AtomSkin from "./components/atom-skin.vue";
import AtomRefresh from "./components/atom-refresh.vue";
import AtomUser from "./components/atom-user.vue";
import AtomMenuToggle from "./components/atom-menu-toggle.vue";
import {useCollapsedStore} from "@/stores/collapsed.js";

const store = useCollapsedStore()

const asideWidth = computed(() => {
    return store.isCollapsed ? '64px' : '200px'
})

const mainWidth = computed(() => {
    return store.isCollapsed ? 'calc(100% - 64px)' : 'calc(100% - 200px)'
})


const menuList = ref([
    {
        title: "项目管理",
        path: "/manage-project",
        icon: 'icon-zhediedaohang',
    },
    {
        title: "图标管理",
        path: "/hotspot-icon",
        icon: 'icon-zhuti_tiaosepan'
    },
    {
        title: "图标类型",
        path: "/hotspot-type",
        icon: 'icon-dengyu'
    },

    {
        title: "菜单一",
        path: "/menutest/menu1",
        icon: 'icon-zhediedaohang',
        children: [
            {
                title: "子菜单一",
                path: "/menutest/menu1/menu1-1",
                icon: 'icon-zhediedaohang',
            },
            {
                title: "子菜单二",
                path: "/menutest/menu1/menu1-2",
                icon: 'icon-zhediedaohang',
            },
        ],
    },
    {
        title: "菜单二",
        path: "/menutest/menu2",
        icon: 'icon-zhediedaohang',
        children: [
            {
                icon: 'icon-zhediedaohang',
                title: "子菜单一",
                path: "/menutest/menu2/menu2-1",
            },
            {
                icon: 'icon-zhediedaohang',
                title: "子菜单二",
                path: "/menutest/menu2/menu2-2",
                children: [
                    {
                        icon: 'icon-zhediedaohang',
                        title: "孙子菜单一",
                        path: "/menutest/menu2/menu2-2/menu2-1-1",
                    },
                    {
                        icon: 'icon-zhediedaohang',
                        title: "孙子菜单二",
                        path: "/menutest/menu2/menu2-2/menu2-2-2",
                    },
                ],
            },
            {
                icon: 'icon-zhediedaohang',
                title: "子菜单三",
                path: "/menutest/menu2/menu2-3",
            },
        ],
    },
]);
</script>


<style lang="less" scoped>
.layout-container {

    .layout-header {
        border-bottom: 1px solid var(--df-header-border-color);
    }

    .layout-aside {
        background: var(--df-aside-bg-color);
    }

    .layout-main {
        background: var(--df-page-bg-color);
    }
}

</style>